import React, { useEffect, useState } from 'react'
import { Table, Avatar, Card } from 'antd'
import { goto } from '@renderer/api'
import avatar1 from '@/assets/avatar/avatar-15.png'
import './list.less'

const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
        width: '20%',
        render: (text) => (
            <div className="avatar">
                {' '}
                <Avatar src={avatar1} className="img" />
                {text}
            </div>
        )
    },
    {
        title: '手机号',
        dataIndex: 'phone'
    },
    {
        title: '游戏币',
        dataIndex: 'gameCurrency'
    },
    {
        title: '积分',
        dataIndex: 'score'
    }
]
const getRandomuserParams = (params) => ({
    results: params.pagination?.pageSize,
    page: params.pagination?.current,
    ...params
})
const UserList = () => {
    const [data, setData] = useState()
    const [loading, setLoading] = useState(false)
    const [tableParams, setTableParams] = useState({
        pagination: {
            current: 1,
            pageSize: 10
        }
    })
    const fetchData = () => {
        setLoading(true)
        setTimeout(() => {
            setLoading(false)
            setData([
                {
                    name: '叶某某',
                    phone: '15054783724',
                    gameCurrency: 1000,
                    lottery: 20,
                    score: 0
                },
                {
                    name: '陶某某',
                    phone: '15054783725',
                    gameCurrency: 1000,
                    lottery: 20,
                    score: 0
                }
            ])
        }, 1000)
    }
    useEffect(fetchData, [
        tableParams.pagination?.current,
        tableParams.pagination?.pageSize,
        tableParams?.sortOrder,
        tableParams?.sortField,
        JSON.stringify(tableParams.filters)
    ])
    const handleTableChange = (pagination, filters, sorter) => {
        setTableParams({
            pagination,
            filters,
            sortOrder: Array.isArray(sorter) ? undefined : sorter.order,
            sortField: Array.isArray(sorter) ? undefined : sorter.field
        })

        // `dataSource` is useless since `pageSize` changed
        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
            setData([])
        }
    }
    return (
        <Card className="card" title="会员列表">
            <Table
                columns={columns}
                rowKey={(record) => record.phone}
                dataSource={data}
                pagination={tableParams.pagination}
                loading={loading}
                onChange={handleTableChange}
                onRow={record => {
                    return {
                        onClick: event => {
                            goto('/userInfo')
                        }
                    }
                }}
            />
        </Card>
    )
}
export default UserList
